<template>
	<view class="content">
		<!-- 寄件信息 -->
		<form @submit="submit_msg" @reset="reset_sender">
			<view class="sender_msg_box">
				<view class="sender_msg_head_box">
					<view class="sender_msg_title_box">
						<view class="title_icon">寄</view>
						<view class="sender_msg_title">寄件信息</view>
					</view>
					<view class="sender_msg_paste_btn" @click="paste">
						粘贴识别
					</view>
				</view>
				<view class="name_phone_box">
					<input type="text" v-model="sender_name" name="sender_name" class="name" placeholder="请输入姓名" placeholder-style="color:#999999;">
					<input type="text" v-model="sender_phone" name="sender_phone" class="phone" placeholder="请输入11位手机号或固话" placeholder-style="color:#999999;">
				</view>
				<!-- <view>
					<pickerAddress @change="change" class="addr">
						<view class="placeholder" v-show = "!addr_show">请选择省市区</view>
						<view class="placeholder_" v-show="addr_show">{{txt}}</view>
					</pickerAddress>
				</view> -->
				<view class="uni-list-cell-db">
					<view>吉林省 长春市 </view>
					<picker @change="bindPickerChange" name="txt" :value="array[index]" :range="array">
						<view class="placeholder" v-show = "!addr_show">请选择区</view>
						<view class="uni-input"  v-show = "addr_show">{{'&nbsp;' + array[index]}}</view>
					</picker>
				</view>
				<input type="text" class="address" v-model="sender_address" name="sender_address" placeholder="请输入详细地址" placeholder-style="color:#999999;">
				<button form-type="reset" class="reset_btn">清空</button>
			</view>
			<button form-type="submit" class="submit_btn">保存</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				// 收件人信息
				sender_name: '',
				sender_phone: '',
				sender_province: '',
				sender_city: '',
				sender_district: '',
				sender_address: '',
				// 选择省市区
				txt: '',
				addr_show: false,
				index: 0,
				array: [],
			}
		},
		onShow() {
			// 获取token
			uni.getStorage({
				key: 'token',
				success: res => {
					this.token = res.data
					// 获取是否有寄件人信息与是否可以代收货款
					this.$https.get(`api/mini_customer/v1/base/create_order_permit?token=${res.data}`)
					.then(res => {
						// 有寄件人信息
						if (res.data.sender_info_integer){
							if (res.data.city != ''){
								this.addr_show = true
							}
							this.sender_msg_show = true
							this.sender_name = res.data.sender_info.sender_name
							this.sender_phone = res.data.sender_info.sender_phone
							this.txt = res.data.sender_info.sender_province_text + res.data.sender_info.sender_city_text + res.data.sender_info.sender_district_text
							this.sender_address = res.data.sender_info.sender_address
						} else {
							this.sender_msg_show = false
						}
						this.$https.get('api/mini_customer/v1/base/address_lib')
						.then(res => {
							this.array = res.data
						})
					})
				},
				fail: res => {
					uni.redirectTo({
						url: '../login/login'
					})
				}
			})
		},
		methods: {
			bindPickerChange: function(e) {
			    console.log('picker发送选择改变，携带值为', this.array[e.target.value])
			    this.index = e.target.value
				this.addr_show = true
			},
			// 粘贴识别
			paste () {
				uni.getClipboardData({
					success: res => {
						console.log(res.data)
						// 成功后调接口传剪切板上的内容
						this.$https.post(`api/mini_customer/v1/orders/address_parse`,{
							token: this.token,
							address: res.data
						})
						.then(res => {
							// 回显表单内容
							if (res.data.city != ''){
								this.addr_show = true
							}
							this.sender_name = res.data.name
							this.sender_phone = res.data.mobile
							this.array[this.index] = res.data.area
							this.sender_address = res.data.addr
						})
					},
					fail: res => {
						console.log(res)
						uni.showModal({
							title: '提示',
							content: '识别失败，请重新复制后重试',
							showCancel:true
						})
					}
				})
			},
			// 清空表单
			reset_sender (e) {
				this.addr_show = false
				this.value = ''
				this.sender_name = ''
				this.sender_phone = ''
				this.sender_address = ''
				this.sender_province = ''
				this.sender_city = ''
				this.sender_district = ''
			},
			// 选择省市区
			change (data) {
				this.txt = data.data.join('')
				this.addr_show = true
				console.log(data)
				console.log(this.txt)
				this.sender_province = data.data[0]
				this.sender_city = data.data[1]
				this.sender_district = data.data[2]
			},
			// 提交面单
			submit_msg (e) {
				this.sender_name = e.detail.value.sender_name
				console.log(e.detail.value)
				// 表单验证
				if (e.detail.value.sender_name === '' || e.detail.value.sender_name === ' ') {
					uni.showModal({
						title: '提示',
						content: '请输入姓名',
						showCancel: false
					})
				} else if (e.detail.value.sender_phone === '' || e.detail.value.sender_phone === ' '){
					uni.showModal({
						title: '提示',
						content: '请输入电话号码',
						showCancel: false
					})
				} else {
					//提交
					console.log('--提交数据--')
					this.$https.post('api/mini_customer/v1/customers/base_info',{
							token: this.token,
							sender_name: e.detail.value.sender_name,
							sender_phone: e.detail.value.sender_phone,
							sender_address: e.detail.value.sender_address,
							sender_province: '吉林省',
							sender_city: '长春市',
							sender_district: this.array[this.index],
							_method: "patch"
					})
					.then(res => {
						this.reset_sender()
						this.sender_name = ''
						this.sender_phone = ''
						this.sender_address = ''
						uni.showModal({
							title:'提示',
							content: '保存成功',
							showCancel: false
						})
					})
				}
			},
		}
	}
</script>

<style>
	.content {
		height: 100%;
		width: 100%;
		overflow-x: hidden;
		background-color: #F1F1F1;
	}
	.sender_msg_box{
		width: 702rpx;
		height: 540rpx;
		background: white;
		margin-top: 24rpx;
		margin-left: calc((100% - 702rpx) / 2);
		border-radius: 12rpx;
	}
	.sender_msg_head_box{
		display: flex;
		justify-content: space-between;
		padding-top: 24rpx;
	}
	.title_icon{
		width: 60rpx;
		height: 60rpx;
		border-radius: 0 12rpx 12rpx 0;
		background-color: #13A684;
		color: white;
		font-size: 28rpx;
		text-align: center;
		line-height: 60rpx;
	}
	.sender_msg_title_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.sender_msg_title{
		margin-left:12rpx;
		font-size: 32rpx;
		color: #333333;
	}
	.sender_msg_paste_btn{
		height: 60rpx;
		width: 140rpx;
		color: white;
		border-radius: 12rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 28rpx;
		background-color: #13A684;
		margin-right: 24rpx;
	}
	.name{
		padding-bottom: 24rpx;
		font-size: 32rpx;
		border-bottom: 2rpx solid #eeeeee;
		margin-left: 24rpx;
		width: 200rpx;
	}
	.phone{
		padding-bottom: 24rpx;
		font-size: 32rpx;
		border-bottom: 2rpx solid #eeeeee;
		margin-left: 24rpx;
		width: 430rpx;
	}
	.name_phone_box{
		display: flex;
		margin-top: 48rpx;
	}
	.placeholder{
		color: #999999;
		font-size: 32rpx;
		margin-left: 14rpx;
	}
	.placeholder_{
		color: #333333;
		margin-top: 48rpx;
		margin-left: 24rpx;
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #eeeeee;
		font-size: 32rpx;
		width: 654rpx;
	}
	.address{
		padding-bottom: 24rpx;
		font-size: 32rpx;
		border-bottom: 2rpx solid #eeeeee;
		margin-left: 24rpx;
		width: 654rpx;
		margin-top: 48rpx;
		font-size: 32rpx;
	}
	.reset_btn{
		width: 140rpx;
		height: 60rpx;
		margin-left:538rpx;
		border: 2rpx solid #13A684;
		color: #13A684;
		border-radius: 12rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 28rpx;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		background: #ffffff;
	}
	.submit_btn{
		width: 100%;
		height: 140rpx;
		position: fixed;
		border-radius: 0;
		bottom: 0;
		background: #13A684;
		color: white;
		text-align: center;
		line-height: 140rpx;
		font-size: 36rpx;
	}
	.uni-list-cell-db{
		display: flex;
		align-items: center;
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-top: 48rpx;
		border-bottom: 1px solid #eeeeee;
		padding-bottom: 24rpx;
		color: #333333;
		font-size: 32rpx;
	}
</style>
